<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
    <style>
        body {
            margin: 0;
        }

        canvas {
            display: block;
        }
    </style>
</head>

<body>
    <script>
        var scene = new THREE.Scene()
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
        var renderer = new THREE.WebGLRenderer()

        renderer.setSize(window.innerWidth, window.innerHeight)

        document.body.appendChild(renderer.domElement)

        var geometry = new THREE.BoxGeometry()
        var material = new THREE.MeshBasicMaterial({
            color: 0x00ff00
        }) //材质
        var cube = new THREE.Mesh(geometry, material) //结合
        scene.add(cube)
        camera.position.z = 5;

        //渲染场景
        function animate() {
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01; cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>

</html>